<template>
    <div class="component-picker-range">
        <input
            type="text"
            class="component-picker-range__input" 
            :id='pickerId' 
            :placeholder="placeholder" 
            :value='value'>
        <p 
            class="component-picker-range__text item"
            :class="{ 'placeholder':selectText === '' }" >{{ selectText || placeholder }}</p>
    </div>
</template>

<script>
    import '../libs/mobiscroll/css/mobiscroll.min.css'
    import '../libs/mobiscroll/js/mobiscroll.js'
    import '../libs/mobiscroll/js/i18n/mobiscroll.i18n.zh.js'
    import  { mapGetters, mapActions }  from 'vuex'

    export default {
        props:{
            value:[Array,Object,String,Number,Boolean],
            pickerId:{
                type: String,
                default: 'picker-id'
            },
            from:{
                type: Array,
                default:()=>{
                    return []
                },
            },
            to:{
                type: Array,
                default:()=>{
                    return []
                },
            },
            placeholder:{
                type: String,
                default:'请选择'
            },
        },
        data() {
            return {
                show_options:false,
                selectText:'',
                topPos:'',
                zIndex:1
            }
        },
        computed:{
            ...mapGetters([
                'localInfo'
            ]),
        },
        methods:{
            getText(value){
                let fromValue = value[0]
                let toValue = value[1]
                let fromText = _.filter(this.from,(val,index)=>{
                    return fromValue == val.value
                })
                let toText = _.filter(this.to,(val,index)=>{
                    return toValue == val.value
                })
                console.log(fromValue)
                console.log(toValue)
                this.selectText = fromText[0].display + ' - ' + toText[0].display
                
            },

        },
        created() {
            if(this.value.length) this.getText(this.value)
        },
        mounted() {
            let self = this
            this.$nextTick(()=> {
                let scrollerInit = mobiscroll.scroller(`#${this.pickerId}`, {
                    lang: 'zh',
                    display: 'bottom',
                    wheels: [
                        [{
                            label:'first',
                            circular: false,
                            data: self.from
                        },{
                            label:'second',
                            circular: false,
                            data: self.to
                        }]
                    ],
                    width:[250,250],
                    validate (event, inst) {
                        var i,
                            values = event.values,
                            disabledValues = [];

                        for (i = 0; i < self.to.length; ++i) {
                            if (+self.to[i].value < +values[0]) {
                                disabledValues.push(self.to[i].value);
                            }
                        }

                        return {
                            disabled: [
                                [], disabledValues
                            ]
                        }
                    },
                    parseValue (valueText) {
                        if (valueText) {
                            return valueText.replace(/\s/gi, '').split(',');
                        }
                        return [self.from[0].value, self.to[0].value];
                    },
            
                    onSet(event, inst) {
                        let value = inst.getArrayVal()
                        self.getText(value)
                        self.$emit('input',value)
                    },
                })
            })
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    
    .component-picker-range{
        display: flex;
        width: 100%;
        position: relative;
        align-items:center;
        box-sizing:border-box;
    }
    .component-picker-range__input{
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        opacity:0;
    }
    .component-picker-range__text{
        flex:1;
        color:$importColor;
        &.placeholder{
            color:$placeholderColor
        }
    }

</style>


